<template>
  <div class="template">
     <div class="search">
      <div class="search-center">
        <div class="search-item">
            <Input clearable
            v-model="search.nickname"
            placeholder="用户昵称"
            style="width: 150px;"
            ></Input>
        </div>
        <div class="search-item">
            <Input clearable
            v-model="search.phone"
            placeholder="请输入手机号"
            style="width: 150px;"
            ></Input>
        </div>
        <div class="search-item">
            <Input clearable
            v-model="search.orderNo"
            placeholder="订单号/服务单号"
            style="width: 150px;"
            ></Input>
        </div>
         <div class="search-item">
            <Input clearable
            v-model="search.serviceNo"
            placeholder="服务单号"
            style="width: 150px;"
            ></Input>
        </div>    
        <div class="search-item">
            <Select clearable
                style="width:100px;"
                v-model="search.status"
                :label-in-value="true"
                placeholder="请选择状态"
                class="select"
              >
             <Option value="0" label="待付款"></Option>
             <Option value="1" label="已补发"></Option>
             <!-- <Option value="-1" label="已退款"></Option> -->
            </Select>
         </div>

         <Button
          style="width: 80px;margin-right: 10px;margin-bottom:5px"
          type="primary"
          icon="ios-search"
          @click="searchFn"
          >查询</Button>
      </div>    
      
    </div>
    <div class="table">
      <Table
        :columns="diyData.columns"
        :data="apiData.tableList"
      >
        <template slot="footer">
             <Page
            :total="apiData.total"
            show-total
            :page-size="search.pageSize"
            :current="search.pageNo"
            @on-change="pageChange"
            @on-page-size-change="pageSizeChange"
            class-name="footer-page"
            show-elevator
            show-sizer
          ></Page>
        </template>
      </Table>
    </div>

    <Drawer title="" width="400" :closable="false" v-model="diyDom.showModal">  
        <div class="Drawer-content" v-if="apiData.infor">
            <div class="status">
              <span v-if="apiData.infor.reason==1" >少件/发错货/未收到货</span>
              <span v-if="apiData.infor.reason==2" >商品破损/包装问题</span>
              <span v-if="apiData.infor.reason==3" >商品质量问题</span>
            </div>
            <!-- <div class="Drawer-content-list">
              <div class="content-item-title">
                收货信息：
              </div>
               <div class="content-item-center">
                <p>{{apiData.infor.name}} {{apiData.infor.phone}}</p>
                <p>{{apiData.infor.address}}</p>
              </div>
            </div>
             <div class="Drawer-content-list">
              <div class="content-item-title">
                买家备注：
              </div>
               <div class="content-item-center">
                {{apiData.infor.buyerRemark||'无'}}
              </div>
            </div>
             <div class="Drawer-content-list">
              <div class="content-item-title" style="line-height: 30px;">
                快递信息：
              </div>
               <div class="content-item-center">
                <div class="content-item-center" style="line-height: 30px;" v-if="apiData.infor.expressCompany||apiData.infor.deliveryNo">
                  {{apiData.infor.expressCompany}}  {{apiData.infor.deliveryNo}}
                </div>
                <div class="content-item-center" style="line-height: 30px;" v-else>无</div>
              </div>
            </div> -->
            <Divider dashed />
            <div class="Drawer-content-list">
              <div class="content-item-title">
                订单号：
              </div>
               <div class="content-item-center">
                {{apiData.infor.orderNo||'无'}}
              </div>
            </div>
            <div class="Drawer-content-list">
              <div class="content-item-title">
                售后商品：
              </div>
               <div class="content-item-center">
                    <div class="content-item-center-box">
                      <div class="content-item-center-box-title">
                        {{apiData.infor.productName}}
                      </div>
                      <div v-if="apiData.infor.skuName" class="content-item-center-box-content">
                        规格：{{apiData.infor.skuName}}
                      </div>
                      <div v-if="apiData.infor.typeName" class="content-item-center-box-content">
                        类型：{{apiData.infor.typeName}}
                      </div>
                    </div>
                    <p>共{{apiData.infor.num}}件商品</p>
              </div>
            </div>
            <!-- <div class="Drawer-content-list">
              <div class="content-item-title">
                售后商品：
              </div>
               <div class="content-item-center">
              </div>
            </div>
            <div class="Drawer-content-list">
              <div class="content-item-title">
                售后商品：
              </div>
               <div class="content-item-center">
                  <img style="width:90px" src="">
              </div>
            </div> -->
            
            <Divider dashed />
            <div class="Drawer-content-list">
              <div class="content-item-title">
                处理方式：
              </div>
               <div class="content-item-center">
                    <div style="margin-bottom: 10px">
                      <Select clearable
                            style="width: 200px"
                            v-model="form.status"
                            :label-in-value="true"
                            placeholder="请选择状态"
                            class="select"
                          >
                            <Option value="1" label="补发"></Option>
                            <!-- <Option value="-1" label="退款"></Option> -->
                      </Select>
                    </div>
                    <div v-if="form.status==1">
                      <Select clearable
                            style="width: 200px;margin-bottom:10px"
                            v-model="form.expressCompany"
                            @on-change="setCourierCompany"
                            allow-create 
                            @on-create="handleCreate"
                            :label-in-value="true"
                            filterable
                            placeholder="请选择快递公司"
                            class="select"
                          >
                        <Option v-for="(item,index) in apiData.courierCompany" :key="index" :value="item.value" >{{item.name}}</Option>
                      </Select>
                      <Input clearable
                          v-model="form.deliveryNo"
                          placeholder="请输入快递单号"
                          style="width: 200px"
                      ></Input>
                    </div>
                    <div v-if="form.status==-1">
                      <Input clearable
                          v-model="form.refundAmount"
                          placeholder="请输入商品退款金额"
                          style="width: 200px;"
                      ></Input>
                    </div>
              </div>
            </div>
            <Divider dashed />
            <div>
              <Button type="primary" style="width: 90px; margin-left: 20px" @click="getCommitProcessing" >提交处理</Button>
            </div>
        </div>
    </Drawer>
    <Drawer title="" width="400" :closable="true" v-model="diyDom.showDelivery">
        <div class="Drawer-content" v-if="apiData.deliveryInfo">
            <div class="Drawer-content-list">
              <div class="content-item-title">
                快递信息：
              </div>
               <div class="content-item-center">
                <p> {{apiData.deliveryInfo.expressCompany}}</p>
                <p>{{apiData.deliveryInfo.expressNo}}</p>
              </div>
            </div>
            <div class="deliveryList-center" v-for="(item,index) in apiData.deliveryList" :key="index">
              <div class="updateTime">{{item.time}}</div>
              <div class="deliveryInfo">{{item.context}}</div>
              <div class="dian"></div>
            </div>  
        </div>
    </Drawer>
  </div>
</template>

<script>
import axios from 'axios'
import {apiQuestionorderList,apiQuestionorderInfo,apiQuestionorderOperate} from '@/api/after-sales-manage.js'
import {apiDeliveryInfo,apiOrderinfoSendOut} from '@/api/order-records.js'
export default {
  name: 'after-sales-manage',
  data () {
    return {
      orderNos:'',
      search: {
        nickname:'',
        orderNo:'',
        phone:'',
        reason:'',
        result:'',
        serviceNo:'',
        status:'',
        pageNo: 1,
        pageSize: 10,
      },
      diyDom:{
        showModal:false,
        showDelivery:false
      },
      form:{
        deliveryNo:'',
        expressCompany:'',
        refundAmount:'',
        serviceNo:'',
        status:'',
      },
      diyData: {
       
        columns: [
          {
            title: '订单号/服务单号',
            width:'250px',     
            key: 'orderNo',  
            render: (h, params) => {
              return h('div', [
                h('p', params.row.orderNo),
                h('p', params.row.serviceNo)
              ])
             }    
          },
           {
            title: '昵称/手机号',
            width:'150px',
            key: 'phone',
             render: (h, params) => {
              return h('div', [
                h('p', params.row.nickname),
                h('p', params.row.phone)
              ])
             }
          },
          {
            title: '售后商品',
            width:'150px',
           render: (h, params) => {
              return h('div', [
                h('p', params.row.productName),
              ])
             }
          },
           {
            title: '数量',
            width:'100px',
           render: (h, params) => {
              return h('div', [
                h('p', params.row.num),
              ])
             }
          },
          {
            title: '商品单价',
            width:'100px',
            key: 'amount',
          },
          {
            title: '退款金额',
            width:'100px',
            key: 'refundAmount',
          },
          {
            title: '申请原因',
            width:'200px',
            key: 'reason',
             render: (h, params) => {
              var html = []
              switch (params.row.reason) {
                case 1:
                  html.push(h('span','少件/发错货/未收到货'))
                  break
                case 2:
                  html.push(h('span','商品破损/包装问题'))
                  break
                case 3:
                  html.push(h('span','商品质量问题'))
                  break
              }
              return h('div',html)
            }
          },
          {
            title: '图片',
            width:'120px',
           render: (h, params) => {
            var html = []
              if(params.row.imgs){
                params.row.imgs.split(',').forEach(item=>{
                  html.push(h('img', {
                    attrs: {
                        src: item,
                    },
                    style: {
                        width: '50px',
                        marginRight:'10px'
                    },
                }))
                })
              }


              return h('div', html)
             }
          },
          {
            title: '提交时间 ',
            width:'180px',
            key: 'createTime',
          },
          {
            title: '状态',
            width:'200px',
             render: (h, params) => {
              var html = []
              switch (params.row.status) {
                case 0:
                  html.push(h('span',{
                    style: {color:'#383838',
                    }
                  },'待处理'))
                  break
                case 1:
                  html.push(h('p',{
                    style: {color:'#383838'}
                  },'已补发'))
                  break
                case -1:
                  html.push(h('p',{
                    style: {color:'#FF5733'}
                  }, '已退款'))
                  break
              }
              return h('div',html)
            }
          },
          {
            title: '处理结果',
            width:'200px',
            render: (h, params) => {
              return h('div', [
                h('p', params.row.result),
              ])
             }
          },
           {
            title: '处理时间',
            width:'150px',
            key: 'operateTime',
           
          },
       
           {
            title: '操作',
            width:'150px',
            fixed: 'right',
            render: (h, params) => {
                  return h('div', [
                      h('Button', {
                          props: {
                            type: 'primary',
                            size: 'small',
                          },
                          style:{
                              marginRight:'10px',
                              fontSize:'14px',
                                display:params.row.status!=0?'none':''
                          },
                          on: {
                              click: () => {
                                    this.$store.commit('setSpinShow', true)
                                     apiQuestionorderInfo({id:params.row.id}).then(res=>{
                                         this.diyDom.showModal = true  
                                         this.form.serviceNo=params.row.serviceNo
                                         console.log(res.data)
                                         this.apiData.infor=res.data
                                     }).finally(() => this.$store.commit('setSpinShow', false))
                              }
                          },                            
                        },
                      '处理'
                      ),
                       h('Button', {
                          props: {
                            type: 'primary',
                            size: 'small',
                          },
                          style:{
                              marginRight:'10px',
                              fontSize:'12px',
                                display:params.row.status==1?'':'none'
                          },
                          on: {
                              click: () => {
                                 
                                  apiDeliveryInfo({orderNo:params.row.orderNo,type:2}).then(res=>{
                                    if(res.data.deliveryInfo){
                                        this.apiData.deliveryList=JSON.parse(res.data.deliveryInfo)
                                      }
                                       this.apiData.deliveryInfo=res.data
                                       if(res.data){
                                         this.diyDom.showDelivery=true
                                       }
                                  }) 
                              }
                          },                            
                        },
                      '物流详情'
                      ),
                  ])
                }
          },
        ]
      },
      apiData: {
        total: 0,
        infor:null,
        tableList: [], 
        courierCompany:[],
        deliveryList:[],
        deliveryInfo:null,
      }
    }      
  },
  methods: {
    getCourierCompany(){
      var that=this
      axios.get('https://manage.cqhuoshiji.com/utils/courierCompany.js').then(function (response) {
       console.log(response.data)
       that.apiData.courierCompany=response.data
      })
 
    },
   setCourierCompany(){
      var that=this
      this.apiData.courierCompany.forEach(v=>{
        if(v.name==that.form.expressCompany){
          that.form.expressCompanyCode=v.value
        }
      })
    },
    handleCreate(val){
      var that=this
      this.form.expressCompany=val
      this.apiData.courierCompany.push({
        value:'',
        name:val
      })
      
    },
        // 分页
    pageChange (e) {
      this.search.pageNo = e
      this.getTableList()
    },
    pageSizeChange (e) {
      this.search.pageSize = e
      this.search.pageNo = 1
      this.getTableList()
    },
    // 搜索
    searchFn () {
      this.search.pageNo = 1
      this.getTableList()
    }, 
    getTableList(){
      this.$store.commit('setSpinShow', true)
      var opt = { ...this.search }
      apiQuestionorderList(opt).then((res) => {
        const {
          list,
          totalCount
        } = res.data
        
        this.apiData.tableList = list
        this.apiData.total = totalCount
      }).finally(() => this.$store.commit('setSpinShow', false))
    },
    getCommitProcessing(){
        var that=this
        this.$Modal.confirm({
            title: '提示',
            content: '是否确认处理？',
            onOk: () => {
                apiQuestionorderOperate({...that.form}).then(res=>{
                  that.$Message.success('处理成功')
                  that.diyDom.showModal=false
                  that.getTableList()
                }) 
            }
        });
    },
  },
   mounted () {
    this.getTableList()
    this.getCourierCompany()
  },
}
</script>

<style scoped lang="less">
.template{
  width: 100%;
  background: #fff;
  padding: 20px;
  box-sizing: border-box;
}
.button-border{
  margin-right: 10px;
  
}
.Drawer-content{
  width: 100%;
  .status{
    font-size: 24px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 34.75px;
      color: rgba(212, 48, 48, 1);
      text-align: left;
      margin-bottom: 15px;
  }
  .Drawer-content-list{
    width: 100%;
    margin-bottom: 15px;
    display: flex;
    .content-item-title{
      width: 80px;
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 17.38px;
      color: rgba(56, 56, 56, 1);
      text-align: left;
    }
    .content-item-center{
      width: 365px;
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 0px;
      color: rgba(56, 56, 56, 1);
      text-align: left;
      p{
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0px;
        color: rgba(56, 56, 56, 1);
        text-align: left;
      }
      p.name{
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0px;
        line-height: 20.27px;
        color: rgba(0, 0, 0, 1);
      }
      .content-item-center-box{
        width:100%;
        padding: 0px 0 10px;
        box-sizing: border-box;
        border-bottom: 1px solid #E5E5E5;
        margin-bottom: 10px;
        .content-item-center-box-title{
          font-size: 14px;
          font-weight: 700;
          letter-spacing: 0px;
          line-height: 20.27px;
          color: rgba(0, 0, 0, 1);
          margin-bottom: 5px;
        }
        .content-item-center-box-content{
            font-size: 12px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 17.38px;
            color: rgba(128, 128, 128, 1);
             margin-bottom: 3px;
        }
      }
    }
  }
}

.deliveryList-center{
  width: 100%;
  padding:0px 10px 20px; 
  box-sizing: border-box;
  border-left: 1px solid #FD7247;
  position: relative;
  
}
.updateTime{
  font-size: 12px;
  color: #666;
  margin-bottom: 5px;
}
.deliveryInfo{
  font-size:14px;
  color: #333;
}
.dian{
  position: absolute;
  top: -4px;
  left: -4px;
  width: 6px;
  height: 6px;
  background: #FD7247;
  border-radius: 50%;
  display: block;
}
</style>
